<template>
	<view class="">
		<view class="goods-list clearfix column-2">
			<view class="goods-item">
				<view class="dis-flex">
					<view class="goods-item_left">
						<text class="tip-name">官方</text>
						<image class="image" src="../../static/images/bgCar03.png"></image>
						<text class="address ellipsis1">鄞州 白鹤街道</text>
					</view>
					<view class="goods-item_right">
						<view class="goods-name">
							<text class="twoline-hide"><text class="bgColor">在售</text>首付20万落户杭州</text>
						</view>
						<view class="goods-item_desc">
							<view class="desc-selling_point">
								<text class="ellipsis1">浙江省杭州市 1500m²</text>
							</view>
						</view>
						<view class="goods-item_desc">
							<view class="desc_footer">
								<text class="price_x">1200 元/m²</text>
							</view>
						</view>
						<view class="goods-item_desc">
							<view class="desc-selling_point">
								<text class="tip">一房一价</text>
								<text class="tip">新大/鸿翔</text>
								<text class="tip">住宅</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-item">
				<view class="dis-flex">
					<view class="goods-item_left">
						<text class="tip-name">官方</text>
						<image class="image" src="../../static/images/bgCar03.png"></image>
						<text class="address ellipsis1">鄞州 白鹤街道</text>
					</view>
					<view class="goods-item_right">
						<view class="goods-name">
							<text class="twoline-hide"><text class="bgColor">在售</text>首付20万落户杭州</text>
						</view>
						<view class="goods-item_desc">
							<view class="desc-selling_point">
								<text class="ellipsis1">浙江省杭州市 1500m²</text>
							</view>
						</view>
						<view class="goods-item_desc">
							<view class="desc_footer">
								<text class="price_x">1200 元/m²</text>
							</view>
						</view>
						<view class="goods-item_desc">
							<view class="desc-selling_point">
								<text class="tip">一房一价</text>
								<text class="tip">新大/鸿翔</text>
								<text class="tip">住宅</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
// 商品列表
.goods-list {
	padding: 4rpx;
	box-sizing: border-box;
}
.goods-list.column-2 {
	.goods-item {
		width: 100%;
		height: 250rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			margin-bottom: 0;
			border-bottom: none;
		}
	}
	.dis-flex{
		display: flex;
		justify-content: space-between;
		.goods-item_left {
			position: relative;
			background: #fff;
			align-items: center;
			margin-right: 30rpx;
			.tip-name{
				position: absolute;
				left: 10rpx;
				top: 10rpx;
				padding: 8rpx 12rpx;
				font-size: 24rpx;
				color: #544425;
				border-radius: 2px;
				background: linear-gradient(109deg, #E7C280 17.77%, #F4E7CD 102.88%);
				z-index: 9;
			}
			.image {
				width: 240rpx;
				height: 192rpx;
				border-radius: 10rpx;
			}
			.address{
				position: absolute;
				left: 10rpx;
				bottom: 16rpx;
				padding-left: 25rpx;
				color: #fff;
				font-size: 22rpx;
				&:before{
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 20rpx;
					height: 20rpx;
					background: url(../../static/images/addressIcon.svg) no-repeat left center;
					background-size: 20rpx 20rpx;
				}
			}
		}
		.goods-item_right {
			position: relative;
			width: 450rpx;
			flex: 1;
			.goods-name {
				white-space: normal;
				color: #484848;
				font-size: 30rpx;
				font-weight: bold;
				padding-bottom: 10rpx;
				.twoline-hide{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					text{
						font-size: 22rpx;
						padding: 4rpx 10rpx;
						color: #fff;
					}
				}
			}
		}
	}
	
	.goods-item_desc {
		display: flex;
	}
	.desc_footer {
		padding-top: 15rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.price_x {
			color: #FF6A2B;
			font-size: 24rpx;
			font-weight: bold;
		}
	}
	.desc-selling_point {
		padding-top: 10rpx;
		font-size: 22rpx;
		color: #8AB0CC;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		text.tip {
			padding: 0 15rpx;
			height: 36rpx;
			line-height: 40rpx;
			border-radius: 2rpx;
			background: #F1F9FF;
			font-size: 18rpx;
			text-align: center;
			justify-content: flex-end;
			margin-right: 10rpx;
		}
	}	
}
</style>